<template>
	<view>
		
		<view class="row-between" style="margin-bottom: 32upx;">
			<view class="gross">
				<text>总量 :</text>
				<text style="margin-left: 20upx;">{{totalAmount}}</text>
			</view>
			<view class="row-div time-select-view" @click="showPicker = true">
				<!-- !year && !month ? '本月' : year && month ? `${year}年${month}月` : year? `${year}年` : `${month}月` -->
				<text>{{yearMonthText}}</text>
				<image src="/static/assets/open.png" mode=""></image>
			</view>
		</view>
		
		<!-- 明细 列表 -->
		<view class="list-view">
			<view class="row-between list-item" v-for="(item,index) in dataList" :key="item.date + index">
				<view class="">{{item.amount}}</view>
				<view class="">{{item.date}}</view>
			</view>
		</view>
		<g-empty v-if="!dataList.length"></g-empty>
		<picker-view-time v-if="showPicker" @cancel="showPicker = false" @confirm="pickerEvent"></picker-view-time>
	</view>
</template>

<script>
	export default {
		props:{
			type:{ type: String, default: ''}
		},
		data() {
			return {
				showPicker: false,
				totalAmount:null,
				year: null,
				month: null,
				yearMonthText:'本月',
				dateType: 20,
				page: 1,
				dataList:[],
				totalPageNo:0,
			}
		},
		mounted(){
			let data = new Date()
			this.year = data.getFullYear()
			this.month = data.getMonth() + 1
			this.infoRequest()
		},
		methods: {
			// 初始化请求
			async infoRequest() {
				this.$api.showLoading()
				this.page = 1
				this.dataList = []
				this.totalPageNo = 0
				await this.getRequest()
				this.$api.hideLoading()
				
			},
			async pickerEvent (e) {
				this.year = e.year || null
				this.month = e.month || null
				this.page = 1;
				this.dataList = []
				this.yearMonthText = this.month && this.year ? (this.dateType = 20,`${this.year}年${this.month}月`) : this.year ? (this.dateType = 10,`${this.year}年`) : ''
				this.$api.showLoading()
				await this.getRequest()
				this.$api.hideLoading()
			},
			timeFormat(time){
				console.log(time)
				let data = new Date(time - 0)
				let month = data.getMonth() + 1 > 10 ? data.getMonth() + 1 : `0${data.getMonth() + 1}`
				let day = data.getDate() > 10 ? data.getDate() : `0${data.getDate()}`
				let hours = data.getHours() > 10 ? data.getHours() : `0${data.getHours()}`
				let minutes = data.getMinutes() > 10 ? data.getMinutes() : `0${data.getMinutes()}`
				return `${data.getFullYear()}.${month}.${day} ${hours}:${hours}`
			},
			getRequest () {
				return this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/totalDetail',
					method: 'POST',
					data: {
						pageNum: this.page,
						pageSize: 10,
						year: this.year,
						month: this.dateType == 20 ? this.month : '',
						dateType: this.dateType,
						type: this.type
					},
					success: (res) => {
						let arr = res.data.response.resultFormPageableList.results || [];
						if (!arr.length && this.page != 1) return this.$api.msg('没有更多了...');
						arr.forEach(item => {
							item.date = this.timeFormat(item.date)
						})
						this.dataList = this.dataList.concat(arr)
						this.totalAmount = res.data.response.totalAmount
						this.totalPageNo = res.data.response.pages
						this.$emit("getTotalPageNo",this.totalPageNo,this.page)
						uni.stopPullDownRefresh();
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.gross{
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.time-select-view{
		padding: 5upx 20upx;
		background: #FFFFFF;
		border-radius: 25upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		image{
			width: 16upx;
			height: 8upx;
			margin-left: 18upx;
		}
	}

	.list-view{
		padding: 0upx 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
		font-family: PingFang SC;
		.list-item{
			padding: 44upx 0upx;
			border-top: 1upx solid #EEEEEE;
			view:first-of-type{
				font-size: 32upx;
				font-weight: bold;
				color: #333333;
			}
			view:last-of-type{
				font-size: 26upx;
				font-weight: 500;
				color: #999999;
				margin-right: 19upx;
			}
			&:first-of-type{
				border-top: none;
			}
		}
		
	}
</style>
